<template>
  <view class="listInfo">
    <imgbanner
    class="imgbanner1"
    v-if="imgList.length && productList.length"
    :imgList='imgList'
    :productList='productList'
    :currentImg='currentImg'
    @clickPrd="prdScroll"></imgbanner>
    <view class="googsList">
      <view
      class="googsList-title"
      v-for="(item, i) in titleList"
      :key="i"
      :class="{ activeNavList: activeNavList === i }"
      @click="navClick(i, item.title)"
      >
        <text class="title-prddec">{{ item.title }}</text>
        <text class="title-Englint" :class="{ activeNavList: activeNavList === i }">{{ item.descEnglish }}</text>
      </view>
    </view>
    <view class="goodsPrice">
      <text class="title-prddec">室内商品参考总价：<text class="price">¥ {{ totalPrice }}</text></text>
      <text class="title-Englint">Reference price of indoor goods</text>
    </view>
    <view
    v-if="title === '产品列表'"
    class="prddecList"
    v-for="(item, i) in prodListReverse"
    :key="item.id"
    :class="['prd' + item.productSn, {prdbj: activePrd === item.productSn}]"
    @click="productLink(item.productLink)"
    >
      <view>
        <text>产品名称: {{item.productName}}</text>
      </view>
      <view class="prddecList-colum">
        <view class="colum-number">
        <text class="number-number">数量: </text><numberBox :value="item.productNumber" :prdi="i" @change="daysChange"></numberBox>
        </view>
        <text>单价: ￥ {{item.productPrice}} 元</text>
      </view>
      <view class="prddecList-colum">
        <text>单位: {{item.productUnit}}</text>
        <text>合计: ￥ {{ accMul(item.productNumber, item.productPrice) }} 元</text>
      </view>
      <view>
        <text>备注: {{item.productRemark || ''}}</text>
      </view>
    </view>
    <view
    v-if="title === '装修列表'"
    class="prddecList"
    v-for="(item, i) in decoratitems"
    :key="item.id">
      <view>
        <text>项目名称: {{item.itemName}}</text>
      </view>
      <view class="prddecList-colum">
        <view class="colum-number">
        <text class="number-number">数量: </text>
				<numberBox :value="item.itemNumber" :prdi="i" @change="daysChange"></numberBox>
        </view>
        <text>人工辅料: ￥ {{item.itemPrice}} 元</text>
      </view>
      <view class="prddecList-colum">
        <text>单位: {{item.itemUnit}}</text>
        <text>合计: ￥ {{ accMul(item.itemNumber, item.itemPrice) }} 元</text>
      </view>
      <view>
        <text>备注: {{item.itemRemark || ''}}</text>
      </view>
    </view>
    <!-- <tabBar :currentPage="'tabBar1'"></tabBar> -->
  </view>
</template>

<script>
// 底部导航
import tabBar from '@/components/tabBar.vue'
import imgbanner from '@/components/goodinfoImg/imgsBanner-tag.vue'
import numberBox from '@/components/numberBox/numberBox.vue'

export default {
  components: {
    tabBar,
    imgbanner,
		numberBox
  },
  data() {
    return {
      currentImg: 0,
      imgList: [],
      productList: [],
      prodListReverse: [],
      // 装修项目列表
      decoratitems: [],
      activeNavList: 0,
      activePrd: -1,
      title: '产品列表',
      titleList: [
        { title: '产品列表', descEnglish: 'Product list' },
        { title: '装修列表', descEnglish: 'Decoration list' },
      ],
      page: {
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  onLoad(option) {
    this._id = option.id
    this._cpMoney = option.cpMoney
  },
  onShow() {
    // screen.orientation.lock("portrait-primary")
  },
  mounted() {
    let params = {
      // page: this.page.pageIndex,
      // limit: this.page.pageSize
    }
    params.id = this._id
    this.init(params)
  },
  computed: {
    totalPrice() {
      this._cpMoney = 0
      if (this.title === '产品列表') {
        this.prodListReverse.map(item => {
          let itemPrice = this.accMul(item.productNumber, item.productPrice)
          this._cpMoney = this.accAdd(itemPrice, this._cpMoney)
        })
      } else {
        if (this.decoratitems.length === 0) return this._cpMoney
        this.decoratitems.map(item => {
          let itemPriceDec = this.accMul(item.itemNumber, item.itemPrice)
          this._cpMoney = this.accAdd(itemPriceDec, this._cpMoney)
        })
      }
      return this._cpMoney
    }
  },
  methods: {
    init(params) {
      // params.typeName = typeName
      this.$api.getGoodsPhotoInfo(params).then(res => {
        const goodsPhotoList = res.rows
        this.$api.getGoodsProductsInfo(params).then(res => {
          if (res.success) {
            this.imgList = goodsPhotoList
            this.productList = res.rows
            const prodListReverse = res.rows.reverse().filter((item,index) => {
              let _index = res.rows.findIndex(_item => {
                return item.productSn == _item.productSn
              })
              return index == _index
            })
            this.prodListReverse = prodListReverse
          } else {
            uni.showToast({ title: res.msg, icon: 'none' })
          }
        })
      }).catch(err => {
        console.log('request fail', err)
      })
      this.$api.getGoodsDecoratitemsInfo(params).then(res => {
        if (res.success) {
          this.decoratitems = res.rows
        } else {
          uni.showToast({ title: res.msg, icon: 'none' })
        }
      }).catch(err => {
        console.log('request fail', err)
      })
    },
    // 跳转其他链接
    productLink(link) {
			uni.showModal({
				title: '提示',
				content: '请在电脑端打开 https://www.shangteng9588.com/phone/',
				success: function (res) {
					if (res.confirm) {
					} else if (res.cancel) {
						console.log('用户点击取消')
					}
				}
			})
      // if (link !== 'null') {
      //   const params = {
      //     companyAddress: link
      //   }
      //   this.$api.linkUserDeduction(params).then(res => {
      //     if (res.success) {
      //       window.open(link)
      //     } else {
      //       uni.showToast({ title: res.msg, icon: 'none' })
      //     }
      //   }).catch(err => {
      //     console.log('request fail', err)
      //   })
      // }
    },
    navClick(i, title) {
      this.activeNavList = i
      this.title = title
    },
    prdScroll(productSn) {
      this.activePrd = productSn
      uni.createSelectorQuery().select(".listInfo").boundingClientRect(data => {//目标节点
        uni.createSelectorQuery().select(".prd" + productSn).boundingClientRect(res => {//最外层盒子节点
          uni.pageScrollTo({
            duration: 0,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
            scrollTop: res.top - data.top,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
          })
        }).exec()
      }).exec()
    },
    daysChange(val, i) {
      if (this.title === '产品列表') {
        this.prodListReverse[i].productNumber = val
      } else {
        this.decoratitems[i].itemNumber = val
      }
    },
    // 乘法函数，用来得到精确的乘法结果
    accMul(arg1, arg2) {
      let m = 0, s1 = arg1.toString(), s2 = arg2.toString();
      try {
        m += s1.split('.')[1].length
      } catch (e) { }
      try {
        m += s2.split('.')[1].length
      } catch (e) { }
      return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
    },
    // 加法函数，用来得到精确的加法结果
    accAdd(arg1, arg2) {
      let r1, r2, m
      try { r1 = arg1.toString().split('.')[1].length; } catch (e) { r1 = 0; }
      try { r2 = arg2.toString().split('.')[1].length; } catch (e) { r2 = 0; }
      m = Math.pow(10, Math.max(r1, r2))
      return (arg1 * m + arg2 * m) / m
    },
    // 减法函数
    accSub(arg1, arg2) {
      let r1, r2, m, n
      try {
        r1 = arg1.toString().split('.')[1].length
      } catch (e) {
        r1 = 0
      }
      try {
        r2 = arg2.toString().split('.')[1].length
      } catch (e) {
        r2 = 0
      }
      m = Math.pow(10, Math.max(r1, r2))
      //last modify by deeka
      //动态控制精度长度
      n = (r1 >= r2) ? r1 : r2
      return ((arg2 * m - arg1 * m) / m).toFixed(n)
    }
  }
}
</script>

<style lang="scss" scoped>
.listInfo {
  .activeNavList {
    color: $uni-color-base !important;
  }
  .googsList {
    display: flex;
    justify-content: center;
    .googsList-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 40rpx;
      &:first-child:after {
        content: '';
        position: absolute;
        width: 4rpx;
        height: 60rpx;
        background: #D8D8D8;
        margin-left: 240rpx;
        margin-top: 10rpx;
      }
    }
  }
  .title-prddec {
    font-size: 30rpx;
    font-weight: bold;
  }
  .title-Englint {
    color: #999999;
  }
  .goodsPrice {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10rpx;
    .price {
      color: $uni-color-base;
    }
  }
  .prddecList {
    margin: 32rpx 20rpx;
    padding: 10rpx 20rpx;
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0rpx 0rpx 8rpx #888;
    view {
      line-height: 44rpx;
    }
    .prddecList-colum {
      display: flex;
      justify-content: space-between;
      .colum-number {
        display: flex;
        .number-number {
          margin-right: 20rpx;
        }
      }
    }
  }
}
.prdbj {
  background: #DCDCDC !important;
}
</style>
